import React from 'react';
import { Form, Modal, Spin } from 'antd';
import Company from './Company';
import Department from './Department';
import Post from './Post';

const TITLE = {
    addCompany: '新增公司',
    editCompany: '编辑公司',
    addDepartment: '新增部门',
    editDepartment: '编辑部门',
    addDuty: '新增岗位',
    editDuty: '编辑岗位'
};

const OrganizationModal = ({ form, showTips, setShowTips }, ref) => {
    const [visible, setVisible] = React.useState(false);
    const [type, setType] = React.useState('');
    const [query, setQuery] = React.useState(null);
    const [loading, setLoading] = React.useState(false);
    const okRef = React.useRef({ onOk: () => {} });

    const initModal = (typeTemp, param, onOk) => {
        if (!param) {
            return;
        }
        okRef.current.onOk = onOk;
        setQuery(param);
        setType(typeTemp);
        setVisible(true);
    };

    React.useImperativeHandle(ref, () => ({
        addCompany: (param, onOk) => {
            initModal('addCompany', param, onOk);
        },
        editCompany: (param, onOk) => {
            initModal('editCompany', param, onOk);
        },
        addDepartment: (param, onOk) => {
            initModal('addDepartment', param, onOk);
        },
        editDepartment: (param, onOk) => {
            initModal('editDepartment', param, onOk);
        },
        addDuty: (param, onOk) => {
            initModal('addDuty', param, onOk);
        },
        editDuty: (param, onOk) => {
            initModal('editDuty', param, onOk);
        }
    }));

    const handleSubmit = () => {
        form.validateFieldsAndScroll((err, values) => {
            const { _sort, ...formData } = values; // 因为排序问题, _sort是不需要的字段, 不要提交
            if (!err) {
                if (okRef.current) {
                    okRef.current.onOk(formData);
                }
                setVisible(false);
                setShowTips(false);
            }
        });
    };

    const FORM = {
        addCompany: <Company isAddPage form={form} query={query} setLoading={setLoading} />,
        editCompany: <Company form={form} query={query} setLoading={setLoading} />,
        addDepartment: <Department isAddPage form={form} query={query} setLoading={setLoading} showTips={showTips} />,
        editDepartment: <Department form={form} query={query} setLoading={setLoading} />,
        addDuty: <Post isAddPage form={form} query={query} setLoading={setLoading} />,
        editDuty: <Post form={form} query={query} setLoading={setLoading} />
    };

    return (
        <Modal
            title={TITLE[type] || ''}
            width={800}
            visible={visible}
            maskClosable={false}
            destroyOnClose
            onCancel={() => {
                setVisible(false);
                setShowTips(false);
            }}
            onOk={handleSubmit}
            okButtonProps={{ disabled: loading }}
        >
            <Spin spinning={loading}>{FORM[type]}</Spin>
        </Modal>
    );
};

export default Form.create()(React.forwardRef(OrganizationModal));
